page {
    background-color: #F9F9F9;
}

button {
    margin: 0;
    margin-right: 40rpx;
    margin-top: 22rpx;
}
.remind-list {
    overflow: hidden;
}
.header {
    display: flex;
    justify-content: flex-end;
}
.tips {
    margin-left: 40rpx;
    color: #b6b5b5;
    font-size: 20rpx;
}
.add-btn {
    width: 112rpx;
    height: 52rpx;
    line-height: 52rpx;
    background-color: #ff6600;
    color: #ffffff;
    font-size: 22rpx;
}

.list-item {
    display: flex;
}

.list-item-body {
    width: 90%;
    display: flex;
    justify-content: space-between;
    transform: translateX(180rpx);
    transition: all .4s;
    margin-top: 20rpx;
    margin-left: -180rpx;
    padding: 40rpx;
    padding-bottom: 28rpx;
    background-color: #ffffff;
}

.delete-control {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180rpx;
    margin-top: 20rpx;
    text-align: center;
    color: #ffffff;
    background-color: #ff0000;
    transform: translateX(180rpx);
    transition: all .4s;
}

.touch-move .list-item-body, .touch-move .delete-control {
    transform: translateX(0);
}

.title {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #232323;
    font-weight: bold;
}

.circle {
    width: 16rpx;
    height: 16rpx;
    margin-right: 12rpx;
    background-color: #ff6600;
    border-radius: 50%;
}

.time-group {
    margin-top: 10rpx;
    margin-left: 26rpx;
    font-size: 22rpx;
    color: #6E6E6E;
}

.left-time {
    display: flex;
    align-items: center;
    font-size: 22rpx;
    color: #6E6E6E;
}

.left-time-num {
    margin: 0 6rpx;
    color: #232323;
    font-size: 42rpx;
    font-weight: bold;
}

.no-list {
    display: flex;
    flex-direction: column;
    margin-top: 96rpx;
    align-items: center;
    justify-content: center;
}

.null-text {
    margin-top: 26rpx;
    margin-bottom: 44rpx;
    font-size: 32rpx;
    color: #A2A2A2;
}

.null-msg {
    width: 321rpx;
    height: 306rpx;
}

.complete {
    font-size: 42rpx;
    color: #C8C8C8;
    font-weight: bold;
}

.select-remind-control {
    height: 54rpx;
    margin: 0;
    margin-top: 4rpx;
    border: 2rpx solid #ff6600;
    line-height: 50rpx;
    font-size: 22rpx;
    color: #ff6600;
}
.done {
    text-align: center;
}
.float-back {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: rgba(0,0,0,0.71);
}
.float {
    position: relative;
    width: 441rpx;
    height: 295rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 30%;
    padding: 40rpx;
    align-items: center;
    background-color: #ffffff;
}
.floar-title {
    font-size: 20rpx;
    color: #454545;
}
.tel {
    margin-top: 14rpx;
    margin-bottom: 42rpx;
    font-size: 44rpx;
}
.float-control {
    height: 63rpx;
    margin: 0;
    background-color: #ff6600;
    color: #ffffff;
    font-size: 26rpx;
}
.close {
    position: absolute;
    top: 10rpx;
    right: 30rpx;
    padding: 15rpx;
}